<template>
  <div class="login_container">
    <div class="login_box">
      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/logo.png" />
      </div>

      <!-- 登录表单区域 -->
      <!-- 给登录表单设置ref属性，ref值loginFormRef就会成为表单属性$refs的一个属性，此时就可以获取到这个表单对象 -->
      <el-form
        ref="loginFormRef"
        :model="loginForm"
        :rules="loginFormRules"
        label-width="0px"
        class="login_form">
        <!-- 用户名 -->
        <!-- 注意：为用户名框设置的输入规则，需要绑定在input的上层标签 -->
        <el-form-item prop="account">
          <el-input v-model="loginForm.account" placeholder="请输入用户名" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="iconfont icon-3702mima"
            type="password"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <div id="nc"></div>
        <!-- 按钮区域 -->
        <el-form-item class="btns">
          <!-- 通过@语法糖，给登录按钮绑定一个数据预验证功能(校验用户名和密码的位数) -->
          <el-button type="primary" @click="goAliCheck">登录</el-button>
          <!-- <el-button type="success" @click="regDialogVisible=true">注册</el-button> -->
          <!-- 给重置按钮绑定一个单击响应事件 -->
          <el-button type="info" @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
	import {
		setToken
	} from "@/utils/auth";
import { loginIn,loginAwsc } from '@/api/login'

export default {
  data() {
    return {
      // 这是登录表单的数据绑定对象
      loginForm: {
        account: '',
        password: '',
        sessionId: '',
        sig: '',
	      xtoken: '',
        alitoken: '',
        type:'login'
      },
      
      // 这是登录表单的验证规则对象
      loginFormRules: {
        adminname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      },
      // 注册对话框的开关
      regDialogVisible: false,
      // 注册表单
      regForm: {
        adminname: '',
        password: '',
        tel: ''
      },
      // 注册表单的验证
      regFormRules: {
        adminname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        tel: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { min: 11, max: 14, message: '请输入正确格式的手机号码', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        regConPassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  mounted() {
    this.initDrag()
  },

  methods: {
    initDrag() {
      var _that = this
			// 实例化nc
			AWSC.use("ic", function(state, module) {
				// 初始化
				window.nc = module.init({
					// 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
					appkey: "FFFF0N0000000000B251",
					//使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
					scene: "ic_login_h5",
					// 声明滑动验证需要渲染的目标ID。
					renderTo: "nc",
					//前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
					success: function(data) {
            // console.log('static',data);
            // console.log('static',data);
						// // window.console && console.log(data.sessionId)
						// // window.console && console.log(data.sig)
						// // window.console && console.log(data.token)
						_that.loginForm.sessionId = data.sessionId
						_that.loginForm.sig = data.sig
						_that.loginForm.xtoken = data.token
					},
					// 滑动验证失败时触发该回调参数。
					fail: function(failCode) {
						// window.console && console.log(failCode)
					},
					// 验证码加载出现异常时触发该回调参数。
					error: function(errorCode) {
						// window.console && console.log(errorCode)
					}
				});
			})

		},

    async goAliCheck(){
      // const { data: res } = await this.$http.post('api-v1/common/check/AWSC', this.loginForm)
      // 智能验证
      loginAwsc(this.loginForm).then((res)=>{
        this.loginForm.alitoken = res.data.data.token;
        // console.log(res);
        if (!this.loginForm.alitoken) {
            this.$message.error('请点击智能验证按钮')
            return
          }
        setTimeout(()=>{
          this.login();
        },100)
      });
     
    },
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields()
    },
    login() {
      this.$refs.loginFormRef.validate(async valid => {
        // console.log(valid)   // true
        // 发起登录请求之前，先查看数据对象是否合法，不合法(false)就返回，不发起请求
        if (!valid) return
        // 数据对象合法，发起请求，
        loginIn(this.loginForm).then((res)=>{
          // console.log('static',res);
          if (res.data.status == 200 ) {
           window.sessionStorage.setItem('acess','ok'); // session 放置
           this.$message.success("登陆成功！！！");
          //  console.log('static',res.data.accessToken);
           setToken("Token", res.data.accessToken);
            setTimeout(()=>{
            this.$router.push({ path: "/home"});
            },400)
         }else{
          this.$message.error("登录失败！！！");
         }
        })
  

      })
    }
  }
}
</script>

<style lang="less" scoped>
// scoped实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块
.login_container {
  background-color: #2b4b6b;
  height: 100%;
}

.login_box {
  width: 450px;
  height: 330px;
  background-color: #fff;
  border-radius: 3px;
  // 开启绝对定位，设置位移
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    // 给边框和图片之间加一个内边距，保持好看的距离
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    // 设置位移
    position: absolute;
    // 先设置left值为50%(先移动在框内的距离)
    left: 50%;
    // 再设置translate值为-50%(再移动它自身一半的距离)，
    // 这里的移动距离是相对于它的自身高度的(130px*50%)
    transform: translate(-50%, -50%);
    background-color: #fff;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  // 只设置padding的话，输入框会超出边框
  padding: 0 20px;
  // 因此要给它设置box-sizing
  box-sizing: border-box;
  #nc{
    margin: 0px 0px 10px 0px;
    margin-bottom: 10px;
  }
  .btns {
    display: flex;
    justify-content: flex-end;
  }
}

</style>
